<template>
	<view class="pay-page full box relative bg-primary flex-col p-safe">
		<view class="w-wrap">
			<view class="w-inner inner-wrap">
				<view class="pay-box">
					<view class="pay-label">
						<text>支付金额</text>
					</view>
					<view class="price-wrap">
						<text class="price-value">{{ order_amount }}</text>
						<text class="price-label">元</text>
					</view>
				</view>
				<view class="paytype-box">
					<view class="type-label">
						<text>支付方式</text>
					</view>
					<view class="type-item">
						<image src="/static/icon/wx-pay-icon.png" class="type-icon" mode="aspectFill"></image>
						<text class="type-text">微信支付</text>
						<view class="checkbox-wrap">
							<u-icon color="#fff" size="30rpx" name="checkmark" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-wrap">
			<u-button type="primary" shape="circle" @click="handleConfirm">确认</u-button>
		</view>
	</view>
</template>

<script>
	import { showLoading, toast, request } from '@/utils/tool'
	export default {
		data() {
			return {
				from: "",
				order_id: "",
				order_amount: 0
			}
		},
		methods: {
			async prePay(data, openid) {
				const hide = showLoading("正在获取")
				const { from, order_id } = data
				const resp = await request({
					url: "/pay/prepay",
					data: {
						from,
						pay_way: 2,
						order_id,
						pay_qudao: 2,
						openid
					}
				}).catch(hide)
				if (resp.code !== 1) {
					hide()
					return toast({ title: resp.msg || "获取支付参数失败" })
				}
				const { config } = resp.data
				hide()
				uni.requestPayment({
					...config,
					success: ev => {
						toast({ title: "支付成功", icon: "success" })
						uni.navigateBack()
					},
					fail: error => {
						toast({ title: "支付失败" })
					}
				})
			},
			getOpenId() {
				return new Promise(resolve => {
					uni.login({
						provider: "weixin",
						success: async ev => {
							const { code } = ev
							const resp = await request({
								url: '/login/mnpGuanjiaGetOpenid',
								data: { code }
							})
							console.log(resp, 'resps');
							if (resp.code !== 1) {
								return resolve([resp.data, null])
							}
							resolve([null, resp.data])
						},
						fail: error => {
							toast({ title: "获取code失败" })
							resolve([error, null])
						}
					})

				})
			},
			async handleConfirm() {
				const { order_id, from } = this
				if (!order_id) return toast({ title: "缺少订单ID", icon: "error" })
				const [codeError, codeResp] = await this.getOpenId()
				if (codeError) return
				const { openid } = codeResp
				this.prePay({ from, order_id }, openid)
			}
		},
		onLoad(ev) {
			const { data } = ev
			if (data) {
				const payload = JSON.parse(decodeURIComponent(data))
				const { from, order_id, order_amount } = payload
				this.order_amount = order_amount
				this.from = from
				this.order_id = order_id
			}

		}
	}
</script>

<style lang="scss" scoped>
	.pay-page {
		.inner-wrap {
			padding: 24rpx 32rpx 0;
			box-sizing: border-box;
		}

		.footer-wrap {
			padding: 0 32rpx;
		}

		.paytype-box {
			padding: 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 10rpx -6rpx rgba(0, 0, 0, 0.04);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 32rpx;

			.type-item {
				display: flex;
				align-items: center;

				.checkbox-wrap {
					margin-left: auto;
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #0565FF;
				}

				.type-icon {
					width: 64rpx;
					height: 64rpx;
				}

				.type-text {
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.9);
					line-height: 48rpx;
					margin-left: 16rpx;
				}
			}

			.type-label {
				font-size: 28rpx;
				color: #1D2129;
				line-height: 44rpx;
				margin-bottom: 32rpx;
			}
		}

		.pay-box {
			padding: 32rpx 32rpx 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 10rpx -6rpx rgba(0, 0, 0, 0.04);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.price-wrap {
				.price-value {
					font-size: 48rpx;
					color: rgba(0, 0, 0, 0.9);
					font-weight: bold;
					line-height: 48rpx;
				}

				.price-label {
					font-size: 28rpx;
					color: #1F1F1F;
					line-height: 44rpx;
					padding-left: 16rpx;
				}
			}

			.pay-label {
				font-weight: bold;
				font-size: 28rpx;
				color: #5A5A5A;
				line-height: 40rpx;
				margin-bottom: 16rpx;
			}
		}
	}
</style>